<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>axios基本使用</title>
        <!-- 1. 导入 axios -->
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    </head>
    <body>
        <button>点击发送 GET 请求</button>
        <button>点击发送 POST 请求</button>
        <button>点击发送 PUT 请求</button>
        <button>点击发送 PATCH 请求</button>
        <button>点击发送 DELETE 请求</button>
        <script>
            //获取按钮
            let btns = document.querySelectorAll('button');

            //绑定事件
            /*
                btns[0].onclick = function(){
                    // http://127.0.0.1:3000/movie  获取所有的电影
                    axios({
                        //请求类型
                        method: 'get',
                        // URL
                        url: 'http://127.0.0.1:3000/movie'
                    }).then(res => {
                        // console.log(res);// 成功的结果值包含了响应的所有内容
                        console.log(res.data);// 响应体结果
                    }, error => {
                        console.log(error);
                    });
                }
            */
            
            //重点 重点 重点
            btns[0].onclick = async function(){
                //发送 AJAX 请求, 获得成功的结果
                try{
                    let result = await axios({
                        method: 'get',
                        url: 'http://127.0.0.1:3000/movie'
                    });
                    //then 方法成功的回调位置
                    console.log(result); // 对象 {status, statusText, headers, data}
                }catch(e){
                    //then 方法失败的回调位置
                    console.log(e);
                }
            }

            
            
        </script>
    </body>
</html>
